<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>右侧推荐栏</title>
		<!-- <link rel="stylesheet" href="/layui/css/layui.css">
		<script src="/layui/layui.js"></script>
		<script src="/layui/jquery-v3.2.1.js"></script>
		<script src="/layui/lay/modules/layui.js"></script> -->
		
	</head>
	<style type="text/css">
	.main_recommend{
		width:300px;
	}
	.layui-table{
		margin-top:0px;
		margin-bottom:10px;
		margin-left:10px;
	}
	.layui-table th{
		background-color:#fff;
	}
	.text_hide {		
		 width:260px;
	}
	.text_hide:hover{
	color:red;
	}
	.rem_text_hide{
    display:-webkit-box;     
    overflow:hidden;
    width:210px;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

	</style>
	<body>
		<div class="recommend_right" th:fragment="recommend_right"><!-- 这边的class被保存 -->
		<div class="main_recommend">
			<!-- 今日推荐 -->
			<table class="layui-table">
				<thead>
				  <tr>     
				    <th><span style="color:#cf2730;font-size:20px">|</span> 今日推荐</th>
				  </tr> 
				</thead>
				<tbody>
				<tr th:each="recommendArticle : ${recommendArticleTitle}" >
							<td>
						<div style="width:100%">
				    		<div class="layui-row">
							    <div class="layui-col-md2">
							    	<li class="layui-icon layui-icon-fire" style="font-size: 21px; color: #ff2400;padding-left: 4px;"></li>
							    </div>
							    <div class="layui-col-md10">
							    
							    <a class='rem_text_hide'style="margin-left: -10px;font-weight: 600;" th:text="${recommendArticle?.title}" target="_blank"
										th:href="@{'/user/article/detail/'+${recommendArticle?.articleId}}">人生就像是一场修行，修行不到家只能还俗了！</a>
							    </div>
							  </div>
				    	</div>
						</td>
						</tr>
				 
				</tbody>
			</table>
			<!-- 热门排行 -->
			<table class="layui-table main_recommend">
				<thead>
				  <tr>     
				    <th><span style="color:#cf2730;font-size:20px">|</span> 热门排行</th>
				  </tr> 
				</thead>
				<tbody> <!--  -->
				  <tr  th:each="hot : ${hotArticles}">			     
				    <td>
				    	<div class='text_hide'>
				    		<a th:text="${hot.title}"  th:href="@{'/user/article/detail/'+${hot.articleId}}" target="_blank">人生就像是一场修行，修行不到家只能还俗了！</a>
				    	</div>
				    </td>
				  </tr>
				</tbody>
			</table>
			<!-- 游览排行 -->
			<table class="layui-table main_recommend">
				<thead>
				  <tr>     
				    <th><span style="color:#cf2730;font-size:20px">|</span> 游览排行</th>
				  </tr> 
				</thead>
				<tbody >
				  <tr th:each="browse : ${browseArticles}">			     
				   <td>
					  <div  class='text_hide'>
					   	<a th:text="${browse.title}" th:href="@{'/user/article/detail/'+${browse.articleId}}" target="_blank">人生就像是一场修行，修行不到家只能还俗了！</a>
					  </div>
				   </td>
				  </tr>
				</tbody>
			</table>
		</div>	
		<div class="tail">
		<div class="right-tail" th:replace="/show/right_tail"></div>
		</div>
		</div> 		
	</body>
	<script type="text/javascript">
		$(document).ready(function() {
		 $("tr").hover(function(){
			    $(this).css("background-color","#fff");
			    },function(){
			    $(this).css("background-color","#fff");
			  });
	});
		</script>
</html>